import request from "@/services/interceptors";
import { ObjectiveTopicType, OperationExerciseType } from "@/types";
import {
  enumToObject,
  ExerciseTypeEnum,
  QuestionTypeEnum,
} from "@/utils/enums";
import { ProDescriptions } from "@ant-design/pro-components";
import type { ProDescriptionsActionType } from "@ant-design/pro-components";
import { useRef } from "react";
import { useAtomValue } from "jotai";
import { enumValuesAtom } from "@/store/enum";
import DownloadFile from "@/components/DownLoadFile";
import BackendImage from "@/components/BackendImage";
import { replaceKnowledgeDesc } from "@/utils";
import { Divider } from "antd";

interface OperationDetailProps {
  exerciseId: number;
}

const OperationDetail = ({ exerciseId }: OperationDetailProps) => {
  const actionRef = useRef<ProDescriptionsActionType>(null);
  const { courseList } = useAtomValue(enumValuesAtom);

  return (
    <ProDescriptions<OperationExerciseType>
      actionRef={actionRef}
      request={async () => {
        const res = await request.sgks.exerciseGetList({ exerciseId });
        return res;
      }}
      column={1}
      columns={[
        {
          title: "题目编号",
          dataIndex: "exerciseCode",
        },
        {
          title: "题目来源",
          dataIndex: "exerciseSource",
          renderText(text) {
            return text === 1 ? "系统预设" : "用户添加";
          },
        },
        {
          title: "题目类型",
          dataIndex: "exerciseType",
          valueEnum: enumToObject(ExerciseTypeEnum),
        },
        {
          title: "题目信息",
          dataIndex: "exerciseInfo",
        },

        {
          title: "题目",
          dataIndex: "exerciseSteps",
          renderText(text) {
            return (
              <div>
                {text.map((step, idx) => {
                  return (
                    <div key={idx}>
                      <div>
                        {idx + 1}. {step.stepDesc}
                      </div>
                      <div>
                        <BackendImage url={step?.stepPics} />
                      </div>
                      <Divider />
                    </div>
                  );
                })}
              </div>
            );
          },
        },
        {
          title: "原始素材",
          dataIndex: "exerciseRawFile",
          renderText(text) {
            return <DownloadFile url={text} />;
          },
        },
        {
          title: "答案文件",
          dataIndex: "exerciseAnswer",
          renderText(text) {
            return <DownloadFile url={text} />;
          },
        },
        {
          title: "课程",
          dataIndex: "courseId",
          valueType: "select",
          fieldProps: {
            options: courseList,
          },
        },
        {
          title: "标签",
          dataIndex: "labels",
          renderText(text) {
            return text?.map((i) => i?.labelName)?.join(",");
          },
        },
        {
          title: "解析",
          dataIndex: "exercisePrompt",
          renderText(text) {
            return <div dangerouslySetInnerHTML={{ __html: text }} />;
          },
        },
      ]}
    ></ProDescriptions>
  );
};
export default OperationDetail;
